<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Expires" content="never" />
<meta name="Revisit-After" content="3 Days" />
<meta name="author" content="Jolyon Terwilliger jolyon@nixbox.com" />
<meta name="subject" content="jQuery uploadprogress plugin by NixBox Designs" />
<meta name="Description" content="jQuery uploadprogress plugin by NixBox Designs" />
<meta name="Classification" content="jQuery uploadprogress plugin by NixBox Designs" />
<meta name="Keywords" content="jolyon, terwilliger, professional, web, website, database, design, engineer, html, xhtml, css, php, javascript, jquery, upload, progress, uploadprogress, demos, demonstration, ajax, sample, example, plugin, tutorial, how, to, howto" />
<meta name="Geography" content="New Mexico, Maine, United States of America" />
<meta name="Language" content="English" />
<meta name="Copyright" content="Jolyon Terwilliger" />
<meta name="Designer" content="Jolyon Terwilliger" />
<meta name="Publisher" content="Jolyon Terwilliger" />
<meta name="distribution" content="Global" />

<meta name="Robots" content="INDEX,FOLLOW" />
<meta name="city" content="Santa Fe, Portland" />
<meta name="country" content="USA, United States, United States Of America, America" />
<title>PHP + jQuery AJAX File Upload Progress Demo</title>
<style type="text/css">

form {
	border:1px outset #330099;
	padding:10px;
	background-color:#FFF8F2;
	width:400px;
}

form fieldset {
	border:1px inset #309;
}

#upload-message {
	background-color:#FFFFEE;
	border:1px dashed #CC3300;
	font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	width:400px;
	padding:10px;
	margin:10px 0px;
}

.upload-progress {
	background-image: url('images/infobox200x40.gif');
	width:200px;
	height:40px;
}

.upload-progress div.meter {
	width:20px;
	height:7px;
	font-size:1px; /* IE display hack */
	background-color:#FFCC00;
	margin-left:10px;
	margin-top:1px;
	border:1px solid black;
}

.upload-progress div.readout {
	padding:5px 0px 0px 12px;
	font-family:"Courier New", Courier, monospace;
	font-size:10px;
	line-height:10px;
}

.upload-progress div.readout span {
	font-weight:bold;
}
</style>
</head>

<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.uploadprogress.0.3.js"></script>
<script type="text/javascript">
jQuery(function () {
	// apply uploadProgress plugin to form element
	// with debug mode and array of data fields to publish to readout:
	jQuery('#upload_form').uploadProgress({ 
						progressURL:'jquery-uploadprogress-demo-simple.php',
						displayFields : ['kb_uploaded','kb_average','est_sec'],
						start: function() { 
							jQuery('#upload-message').html('Uploading files now - please wait.'); 
							jQuery('input[type=submit]',this).val('Uploading... PLEASE WAIT');
						},
						success: function() { 
							jQuery('input[type=submit]',this).val('Upload File(s)');
							jQuery(this).get(0).reset();
							jQuery('#upload-message').html('Upload received!<br/>Form cleared for more uploads.'); 
						}
					});
});
</script>
<h1>jQuery uploadprogress - simple demo</h1>

<form id="upload_form" action="/demos/jquery-uploadprogress-demo-simple.php" method="post" enctype="multipart/form-data">
<fieldset>
<legend>Select files to upload:</legend>
<input type="file" id="file1" name="file1" /><br />
<input type="file" id="file2" name="file2" /><br />
<input type="file" id="file3" name="file3" /><br />
<input type="submit" name="submit" value="Upload File(s)" id="submit" />
</fieldset>
</form>
<div id="upload-message">Start your upload above.</div>
<div class="upload-progress">
	<div class="readout">
		<span class="kb_uploaded">0</span> kb uploaded - <span class="kb_average">0</span> kb/sec <br/><span class="est_sec">0</span> seconds remain
	</div>

	<div class="meter"></div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-711155-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>

